import React, {JSX, useEffect, useState} from "react";
import {View} from "@tarojs/components";
import {EFoodOrderItemType, FoodOrderItem} from "../com/FoodItem";
import {ITabItem, Tabs} from "../../../components/view/Tabs";
import '../../../reset.scss';
import {GetFoodOrders} from "../../../api/bus/food";
import {getStoreOpenId} from "../../../utils/storage";
import './index.scss'

const orderStatus = {
  State: 'State',
  Completed: 'Completed',
  Canceled: 'Canceled',
  All: ''
}


const tabList: Array<ITabItem> = [
  {label: '全部', name: orderStatus.All},
  {label: '待自取', name: orderStatus.State}, // 未支付,按钮：取消订单
  {label: '已完成', name: orderStatus.Completed}, // 已支付，按钮：在住 再次预定
  {label: '已取消', name: orderStatus.Canceled}, // 取消预订，按钮：再次预定
]

export const FoodOrders: React.FC = (): JSX.Element => {
  const [tabActive, setTabActive] = useState(orderStatus.All);
  const onTabChange = (name) => {
    setTabActive(name);
  }

  return (
    <View>
      <Tabs list={tabList} onChange={(name) => onTabChange(name)}></Tabs>
      <FoodOrderList Orderstatus={tabActive}></FoodOrderList>
    </View>
  )
}

interface IFoodOrderList {
  Orderstatus: string
}

export const FoodOrderList: React.FC<IFoodOrderList> = ({Orderstatus}): JSX.Element => {
  const [list, setList] = useState([]);
  const OpenId: string = getStoreOpenId();

  console.log(Orderstatus, OpenId)
  const onSetList = () => {
    GetFoodOrders({OpenId, Orderstatus}).then(res => {
      setList(res);
    })
  }

  useEffect(() => {
    onSetList()
  }, [Orderstatus])


  return (
    <View className='FoodOrderList'>
      {
        list.map(item => (
          <View className='FoodOrderItem' key={item.Id}>
            <View className='top justify-between'>
              <View className='date'>{item.Createtime}</View>
              <View className='stauts'>{tabList.filter(tabItem => tabItem.name === item.Orderstatus)[0].label}</View>
            </View>
            {
              item.Orders.map(orderItem => (
                orderItem && <View key={orderItem.Id}>
                  <View>
                    <FoodOrderItem
                      item={{...orderItem, num: orderItem.num === 0 ? 1 : orderItem.num}}
                      type={EFoodOrderItemType.readonly}
                    ></FoodOrderItem>
                  </View>
                </View>
              ))
            }
          </View>
        ))
      }
    </View>
  )
}


export default FoodOrders;
